<div class="panel-body">
    <div class="form-group">
        <div class="row">
            <label class="col-sm-2 control-label">参数</label>
            <div class="col-sm-8">
                <table class="table">
                    <thead>
                    <tr>

                        <td style='width:150px;'>参数名称</td>
                        <td>参数值 <small>拖动行可进行排序</small></td>
                        <th style='width:50px;'></th>
                    </tr>
                    </thead>
                    <tbody id="param-items">

                    {foreach name="params" item="v"}
                    <tr>

                        <td>

                            <input name="param_title[]" type="text" class="form-control param_title" value="{$v['title']}"/>

                            <input name="param_id[]" type="hidden" class="form-control" value="{$v['id']}"/>
                        </td>
                        <td>

                            <input name="param_value[]" type="text" class="form-control param_value" value="{$v['value']}"/>

                        </td>
                        <td>

                            <a href="javascript:;" class='btn btn-default btn-sm' onclick="deleteParam(this)" title="删除"><i class='fa fa-remove'></i></a>

                        </td>
                    </tr>
                    {/foreach}


                    <tr>

                        <td colspan="3">
                            <a href="javascript:;" id='add-param' onclick="addParam()" class="btn btn-white" title="添加参数"><i class='fa fa-plus'></i> 添加参数</a>
                        </td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var fixHelperModified = function(e, tr) {
            var $originals = tr.children();
            var $helper = tr.clone();
            $helper.children().each(function(index) {
                $(this).width($originals.eq(index).width())
            });
            return $helper;
        }
        $("#param-items").sortable({
            helper: fixHelperModified,
        }).disableSelection();

        $("#chkoption").click(function () {
            var obj = $(this);
            if (obj.get(0).checked) {
                $("#tboption").show();
                $(".trp").hide();
            } else {
                $("#tboption").hide();
                $(".trp").show();
            }
        });
    })

    function addParam() {
        var url = "{:url('goods/tpl',array('tpl'=>'param'))}";
        $.ajax({
            "url": url,
            success: function (data) {
                $('#param-items').append(data);
            }
        });
        return;
    }

    function deleteParam(o) {
        $(o).parent().parent().remove();
    }
</script>